<!--
 * @Description: 事件关联任务
 * @Author: JiangMing
 * @Date: 2021-09-3 15:55:00
 * @LastEditors: JiangMing
 * @LastEditTime: 2021-09-3 15:55:00
-->
<template>
  <view class="content-task">
    <view v-for="(item,index) in taskList" :key="index" class="task-item">
      <view class="task-item__head">
        <text class="task-type">{{ taskTypes[item.type] || '普通任务' }}</text>
        <EventStatusBar :state="item.status" class="status" />
      </view>
      <view class="task-item__info">
        <view class="title">{{ item.name }}</view>
        <view class="task-item__foot">
          <text class="tag">{{ item.eventType }}</text>
          <view class="event-name">
            {{ item.eventName }}
          </view>
        </view>
      </view>
      <view class="task-item__date">
        <view class="col col-left">
          <text class="label">开始时间：</text>
          <view>2021-08-01 10:00:00</view>
        </view>
        <view class="col col-right">
          <text class="label">期望完成时间：</text>
          <view>2021-08-02 10:00:00</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import EventStatusBar from '@/components/eventStatusBar';

export default {
  components: {
    EventStatusBar
  },
  props: {
    eventId: {
      type: String
    }
  },
  data() {
    return {
      taskList: [
        {
          type: 1,
          name: '核查环城路附近发生洪涝灾害的街道',
          eventName: '核查环城路附近发生洪涝灾害核查环城路附近发生洪涝灾害',
          eventType: '洪涝',
          createTime: '2021-12-12  12:20:12',
          status: '1',
          id: 101
        },
        {
          type: 2,
          name: '核查环城路附近发生洪涝灾害的街道',
          eventName: '核查环城路附近发生洪涝灾害核查环城路附近发生洪涝灾害',
          eventType: '洪涝',
          createTime: '2021-12-12  12:20:12',
          status: '2',
          id: 102
        },
        {
          type: 3,
          name: '核查环城路附近发生洪涝灾害的街道',
          eventName: '核查环城路附近发生洪涝灾害核查环城路附近发生洪涝灾害',
          eventType: '洪涝',
          createTime: '2021-12-12  12:20:12',
          status: '1',
          id: 103
        },
      ],
      taskTypes: {
        1: '资源调度',
        2: '集合'
      }
    }
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>
.content-task {
  padding: 32rpx;
}
.task-item {
  padding: 0 32rpx 32rpx 32rpx;
  border-radius: 16rpx;
  background: #fff;
  box-shadow: 0px 5px 15px rgba(44, 121, 247, 0.2);
  margin-bottom: 32rpx;
  font-size: 24rpx;
  &:last-child {
    margin-bottom: 0;
  }
  .task-item__head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
  }
  .task-item__foot {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .status {
    margin-top: 10rpx;
  }
  .title {
    font-size: 30rpx;
    color: #2B2B2B;
    margin-bottom: 20rpx;
    font-weight: 500;
    // white-space: nowrap;
    // overflow: hidden;
    // text-overflow: ellipsis;
  }
  .tag {
    display: inline-block;
    border-radius: 16rpx;
    background: rgba(50, 148, 255, 0.2);
    border: 1px solid #027aff;
    color: #027aff;
    padding: 0 16rpx;
    height: 32rpx;
    line-height: 30rpx;
    margin-right: 20rpx;
  }
  .date {
    color: rgba(43, 43, 43, .6);
    .date-icon {
      width: 24rpx;
      height: 24rpx;
      vertical-align: middle;
      margin-right: 10rpx;
    }
    .date-text {
      vertical-align: middle;
    }
  }
  .task-type {
    display: inline-block;
    text-align: center;
    min-width: 120rpx;
    height: 40rpx;
    line-height: 40rpx;
    padding: 0 10rpx;
    border-radius: 0 0 20rpx 20rpx;
    background-color: #027AFF;
    color: #FFF;
  }
  .event-name {
    text-overflow: ellipsis;
  }
  .task-item__date {
    display: flex;
    justify-content: space-around;
    color: #2B2B2B;
    margin-top: 20rpx;
    .label {
      display: inline-block;
      color: rgba(43, 43, 43, .5);
      margin-bottom: 12rpx;
    }
    .col {
      width: 50%;
    }
    .col-left {
      padding-right: 20rpx;
      border-right: 1px solid #ddd;
    }
    .col-right {
      padding-left: 20rpx;
    }
  }
}
</style>